<template>
  <div class="theme-select">
    <icons
      v-if="darkMode == darkModeType.DARK"
      name="i-moon"
      theme="filled"
      :size="size"
      :fill="fill"
      @click="changeTheme"
      v-bind="$attrs"
    />
    <icons
      v-else
      name="i-sun-one"
      theme="outline"
      :size="size"
      :fill="fill"
      @click="changeTheme"
      v-bind="$attrs"
    />
  </div>
</template>

<script lang="ts" setup>
import { useTheme } from '@/store/modules/theme'
import { darkMode as darkModeType } from '~/types/theme'
import { setHtmlTheme } from '@/utils/theme/setTheme'
import { getIconColor } from '@/hooks'

const fill = getIconColor()
const props = defineProps({
  size: {
    type: String || Number,
    default: '16'
  }
})
const { size } = toRefs(props)

const theme = useTheme()
const { darkMode } = storeToRefs(theme)
function changeTheme() {
  console.log('changeTheme')
  console.log(
    darkMode.value == darkModeType.DARK ? darkModeType.LIGHT : darkModeType.DARK
  )
  const _darkMode =
    darkMode.value == darkModeType.DARK ? darkModeType.LIGHT : darkModeType.DARK
  theme.setDarkMode(_darkMode)
  setHtmlTheme(_darkMode)
}

defineExpose({
  handleClick: changeTheme
})
</script>

<style lang="less" scoped>
[data-theme='dark'] {
  .theme-select:hover {
    background: @border-color-dark;
  }
}
.theme-select {
  height: @page-header-height;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background: @background-gray;
  }
}
</style>
